<template>
<div class="container_1">
    <h2>子组件 1</h2>
    <p>子组件接收父组件的信息：{{ props.message }}</p>
    <input v-model="newMessage" placeholder="输入新信息" />
    <button @click="sendMessage">发送信息给父组件</button>
    <button @click="$emit('updateMessage',newMessage)">使用$emit发送信息给父组件</button>
</div>
</template>

<script setup>
import {ref} from 'vue'

//defineProps(['message'])
//目的： 定义子组件可以接收到的父组件给的属性（props）
//使用const props，可以明确后面使用的是父组件给的属性
const props = defineProps(['message'])
const message = ref("不好")

//defineEmits(['updateMessage'])
//目的：定义子组件可以发出的事件
const emit = defineEmits(['updateMessage'])

const newMessage = ref('') //输入框输入的内容绑定到newMessage
const sendMessage = () => {
    //使用emit（）正式发出
    //这里updateMessage是发送给父组件的事件，可以带有后面的newMessage.value这个参数
    emit('updateMessage', newMessage.value)
    newMessage.value = ''
}

</script>

<style scoped>
.container_1{
    background-color: rgb(205, 207, 248);
    border-radius: 15px;
    padding: 10px;
    margin:10px;
}
</style>